<!--
 * @Author: your name
 * @Date: 2021-10-08 22:35:43
 * @LastEditTime: 2021-10-08 23:22:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\pages\watch\watch\index.vue
-->
<template>
  <div>
    <h1>watch 单个数据</h1>
    <p>count:{{ count }}</p>
    <a-button @click="addCount" type="primary" ghost>add</a-button>

    <h2>watch 多个数据</h2>
    <p>number: {{ number1 }} -- {{ number2 }} -- {{ number3 }}</p>
    <a-input v-model:value="number1"></a-input>
    <a-input v-model:value="number2"></a-input>
    <a-input v-model:value="number3"></a-input>

    <h2>watch 多个数据</h2>
    <a-input v-model:value="number4"></a-input>
    <a-input v-model:value="number5"></a-input>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import _ from 'lodash'
export default {
  setup(props) {
    const state = reactive({
      count: 0,
    })
    const numArr = reactive({
      number1: '1',
      number2: '2',
      number3: '3',
    })
    const numArr2 = reactive({
      number4: '4',
      number5: '5',
    })
    const addCount = () => {
      state.count ++
    }

    // watch
    watch(
      () => state.count,
      (count, prevCount) => {
        /* ... */
        console.log('单个', count, prevCount)
      }
    )

    // watch 多个数据
    watch(
      () => _.cloneDeep(numArr),  //  必须是一个函数return
      (newValues, prevValues) => {
        console.log('多个', newValues, prevValues)
      },
      { deep: true },
    )

    watch(
      () => [numArr2.number4, numArr2.number5],
      (newValues, prevValues) => {
        console.log('多个2', newValues, prevValues)
      },
    )

    return {
      ...toRefs(state),
      ...toRefs(numArr),
      ...toRefs(numArr2),
      addCount,
    }
  }
}
</script>

<style>

</style>